<!DOCTYPE html>
<html lang="zh-CN"  xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 引入文件 -->
  <script th:src="@{/lib/jquery/jquery-3.2.1.min.js}"></script>
  <script th:src="@{/lib/bootstrap/bootstrap.min.js}"></script>
  <link rel="stylesheet" th:href="@{/lib/bootstrap/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/lib/md-fonts/css/materialdesignicons.min.css}">
  <link rel="stylesheet" th:href="@{/lib/normalize/normalize.css}">

  <script th:src="@{lib/jquery-cookie/jquery-cookie.js}"></script>
  <!-- xyz组件 -->
  <link rel="stylesheet" th:href="@{/lib/xyz_tpl/topbar/topbar.css}">
  <script th:src="@{/lib/xyz_tpl/topbar/topbar.js}"></script>
  <link rel="stylesheet" th:href="@{/lib/xyz_tpl/top_btn/top_btn.css}">
  <script th:src="@{/lib/xyz_tpl/top_btn/top_btn.js}"></script>
  <!-- 私有 -->
  <link rel="stylesheet" th:href="@{/Index/index.css}">
  <script th:src="@{/Index/index.js}"></script>
  <title>通天代 | 二手市场</title>
  <script th:inline="javascript">
      var itemid = /*[[${session.user.id}]]*/
  </script>
</head>

<body>
<!-- Topbar -->
<nav th:replace="header :: copy"></nav>
<!-- TopBar -->

  <!-- 搜索框 -->
  <div id="search_box">
    <div id="index_subtitle">二手物品发布 & 交易市场</div>
    <button id="publish" class="btn btn-outline-light" type="button">
      <img th:src="@{/Index/img/publish.png}" alt="">
      <a href="/publish">发布物品</a>
    </button>
    <form id="search" class="container" action="">
      <div class="input-group">
        <input id="search_input" type="text" class="form-control" placeholder="搜索你想要的东西" aria-label="Search what you want"
          aria-describedby="basic-addon2">
        <div class="input-group-append">
          <button class="btn btn-outline-light" type="button" >
            搜索
            <span class="mdi mdi-magnify"></span>
          </button>
        </div>
      </div>

      <div id="associative_box" class="row col-12 col-sm-6 mt-2">
        <ul id="associative_list"></ul>
      </div>
    </form>
  </div>



  <!-- 新用户加入展示用户指示牌 -->
  <div id="new_user_brand" class="container mb-3">
    <div id="new_user_to_show" class="jumbotron">
      <h1 class="display-4">Hello, 欢迎来到二手市场!</h1>
      <p class="lead">欢迎来到通天代二手市场，在这里你可以发布和浏览校园中所展示的二手物品贩卖信息，请点击下面的“发布信息”将您的二手物品向他人展示，或者点击“不再提示”按钮开始浏览市场！</p>
      <hr class="my-4">
      <p>诚实守信的人，运气都不会太差 ~</p>
      <p class="lead">
        <a id="new_publish" class="btn btn-warning btn-lg" href="#" role="button">发布二手物品</a>
        <a id="dontshow" class="btn btn-secondary btn-lg" href="#" role="button">不再提示</a>
      </p>
    </div>
  </div>



  <!-- 轮播图 -->
  <div id="banner" class="container">
    <div class="row">
      <div id="index_banner" class="carousel slide col-lg-9" data-ride="carousel">
        <ol class="carousel-indicators">
          <!-- 指示器模板 -->
          <li data-target="#index_banner" data-slide-to="0" class="active"></li>
          <!-- --------- -->
          <li data-target="#index_banner" data-slide-to="1"></li>
          <li data-target="#index_banner" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" >
          <!-- 轮播图模板 th:each="content : ${listLUNBOTU}" th:src="${content.subTitle}"-->
          <div class="carousel-item active">
            <img class="d-block w-100"   th:src="${listLUNBOTU.get(0).subTitle}"   alt="First slide">
            <div class="carousel-caption d-none d-md-block">
              <h3>欢迎来到通天代二手市场</h3>
              <p>在这里你可以发布或找到任何二手物品!</p>
            </div>
          </div>
          <!-------------->
          <!-- 轮播图模板 -->
          <div class="carousel-item">
            <img class="d-block w-100"  th:src="${listLUNBOTU.get(1).subTitle}" alt="First slide">
            <div class="carousel-caption d-none d-md-block">
              <h3>欢迎来到通天代二手市场</h3>
              <p>在这里你可以发布或找到任何二手物品！</p>
            </div>
          </div>
          <!-------------->
          <!-- 轮播图模板 -->
          <div class="carousel-item">
            <img class="d-block w-100"  th:src="${listLUNBOTU.get(2).subTitle}" alt="First slide">
            <div class="carousel-caption d-none d-md-block">
              <h3>欢迎来到通天代二手市场</h3>
              <p>在这里你可以发布或找到任何二手物品！</p>
            </div>
          </div>
          <!-------------->
        </div>
        <a class="carousel-control-prev" href="#index_banner" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#index_banner" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

      <div class="d-none d-lg-block col-lg-3" id="right_banner">
        <div class="banner_card">
          <div class="banner_card_title">最新发布</div>
          <ul id="banner_list">
            <!-- 最新发布模板 -->
            <li class="banner_list_item item" th:each="content:${listBESTNEW}" th:attr="item_id=${content.item.id}">
              <img th:src="${content.item.photo}">
              <div class="list_detail">
                <div class="list_detail_title">[[${content.item.title}]]</div>
                <div class="price_box">
                  <span class="price">￥[[${content.item.price}]]</span>
                  <span class="original_price">￥[[${content.item.oldprice}]]</span>
                </div>
              </div>
            </li>
            <!-- --------- -->
          </ul>
        </div>
      </div>
    </div>
  </div>


  <!-- 商品板块 - 编辑精选 -->
  <div id="featured" class="area_box container">
    <div class="row">
      <div class="area_title_box col-md-4">
        <img th:src="@{/Index/img/champain.png}" alt="">
        <div class="img_mask"></div>
        <div class="title">
          <div class="area_title">编辑精选</div>
          <div class="area_subtitle">精选优质商品，先到先得</div>
          <a id="more_featured" class="btn btn-outline-light btn-sm" href="#" role="button">发现更多</a>
        </div>
      </div>

      <div class="item_box col-md-8">
        <div class="row">

          <!-- 商品模板 listBIANJIJINGXUAN-->
          <div class="item col-md-4" item-id="1001" th:each="content:${listBIANJIJINGXUAN}" th:attr="item_id=${content.item.id}">
            <div class="img_border">
              <img th:src="${content.item.photo}" alt="">
            </div>
            <div class="price_box clearfix">
              <div class="percent">[[${content.item.getBaiFenBi()}]]%</div>
              <div class="price clearfix">
                <div class="now">￥[[${content.item.price}]]</div>
                <div class="old">￥[[${content.item.oldprice}]]</div>
              </div>
            </div>
            <div class="item_title">
              <a>[[${content.item.title}]]</a>
            </div>
            <div class="seller clearfix">
              <div class="seller_name">
                <span class="mdi mdi-account-box"></span>[[${content.item.nick}]]
              </div>
              <div class="seller_level">信誉等级：<span>极好</span></div>
            </div>
          </div>
          <!-- --------- -->
        </div>
      </div>
    </div>
  </div>


  <!-- 商品板块 - 平台低价 listPINGTAIDIJIA-->
  <div id="cheaper" class="area_box container" >
    <div class="row right_row">
      <div class="area_title_box col-md-4">
        <img th:src="@{/Index/img/cheaper.png}" alt="">
        <div class="img_mask"></div>
        <div class="title">
          <div class="area_title">平台低价</div>
          <div class="area_subtitle">低价优品，价格实惠</div>
          <a id="more_featured" class="btn btn-outline-light btn-sm" href="#" role="button">发现更多</a>
        </div>
      </div>

      <div class="item_box col-md-8">
        <div class="row">

          <!-- 商品模板 -->
          <div class="item col-md-4" th:each="content:${listPINGTAIDIJIA}" th:attr="item_id=${content.item.id}">
            <div class="img_border">
              <img th:src="${content.item.photo}" alt="">
            </div>
            <div class="price_box clearfix">
              <div class="percent">[[${content.item.getBaiFenBi()}]]%</div>
              <div class="price clearfix">
                <div class="now">￥[[${content.item.price}]]</div>
                <div class="old">￥[[${content.item.oldprice}]]</div>
              </div>
            </div>
            <div class="item_title">
              <a>[[${content.item.title}]]</a>
            </div>
            <div class="seller clearfix">
              <div class="seller_name">
                <span class="mdi mdi-account-box"></span>[[${content.item.nick}]]
              </div>
              <div class="seller_level">信誉等级：<span>极好</span></div>
            </div>
          </div>
          <!-- --------- -->
        </div>
      </div>
    </div>
  </div>


  <!-- 商品板块 - 优质成色 -->
  <div id="quality" class="area_box container">
    <div class="row">
      <div class="area_title_box col-md-4">
        <img th:src="@{/Index/img/quality.png}" alt="">
        <div class="img_mask"></div>
        <div class="title">
          <div class="area_title">优质成色</div>
          <div class="area_subtitle">商品成色优秀，低价售卖</div>
          <a id="more_featured" class="btn btn-outline-light btn-sm" href="#" role="button">发现更多</a>
        </div>
      </div>

      <div class="item_box col-md-8">
        <div class="row">

          <!-- 商品模板 listYOUZHICHENGSE-->
          <div class="item col-md-4" th:each="content:${listPINGTAIDIJIA}" th:attr="item_id=${content.item.id}">
            <div class="img_border">
              <img th:src="${content.item.photo}" alt="">
            </div>
            <div class="price_box clearfix">
              <div class="percent">[[${content.item.getBaiFenBi()}]]%</div>
              <div class="price clearfix">
                <div class="now">￥[[${content.item.price}]]</div>
                <div class="old">￥[[${content.item.oldprice}]]</div>
              </div>
            </div>
            <div class="item_title">
              <a>[[${content.item.title}]]</a>
            </div>
            <div class="seller clearfix">
              <div class="seller_name">
                <span class="mdi mdi-account-box"></span>[[${content.item.nick}]]
              </div>
              <div class="seller_level">信誉等级：<span>极好</span></div>
            </div>
          </div>
          <!-- --------- -->
        </div>
      </div>
    </div>
  </div>


  <!-- 多彩校园 -->
  <div id="school_show" class="container">
    <div class="row title_box">
      <div class="title col-md-5">SchoolBoard</div>
      <div class="joint_box col-md-7">
        <div class="joint clearfix">
          <div class="school_logo_box">
            <img class="school_logo" th:src="@{/Index/img/school_logo.png}">
          </div>
          <span class="mdi mdi-close"></span>
          <span>通天代</span>
        </div>
      </div>
    </div>

    <div class="item_list">
      <div class="row">

        <!-- 商品模板 listSCHOOLBOARD-->
        <div class="item col-6 col-lg-3" th:each="content:${listSCHOOLBOARD}" th:attr="item_id=${content.item.id}">

          <div class="item_innerbox">
            <div class="img_border">
              <img th:src="${content.item.photo}" alt="">
            </div>
            <div class="price_box clearfix">
              <div class="percent">[[${content.item.getBaiFenBi()}]]%</div>
              <div class="price clearfix">
                <div class="now">￥[[${content.item.price}]]</div>
                <div class="old">￥[[${content.item.oldprice}]]</div>
              </div>
            </div>
            <div class="item_title">
              <a>[[${content.item.title}]]</a>
            </div>
            <div class="seller clearfix">
              <div class="seller_name">
                <span class="mdi mdi-account-box"></span>[[${content.item.nick}]]
              </div>
              <div class="seller_level">信誉等级：<span>极好</span></div>
            </div>
          </div>

        </div>
        <!-- --------- -->
      </div>
    </div>


  </div>

  <!-- 返回顶部按钮 -->
  <div id="top_btn" href="#">
    <span class="mdi mdi-format-vertical-align-top"></span>
  </div>

  <!-- 底部 -->
  <div id="footer">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <img class="img_bg" th:src="@{/Index/img/foot_bg.png}" alt="">
        </div>
        <div class="col-md-6">
          <div class="footer_text">
            <h1>通天代</h1>
            <h2>感谢你的加入</h2>
            <hr>
            <h3>Time: 2024.6.22 Version: 1.0 α</h3>
          </div>
        </div>
      </div>
    </div>
  </div>


</body>

</html>